<template>
  <div id="login_back" :style="{backgroundImage:'url('+background_image+')'}">
    <div id="from_back">
      <div id="from">
        <div align="center">
          <p style="font-size:30px;padding:10px;color:#909399">{{adress_data.title}}</p>
          <p style="font-size:15px;padding:5px;color:#C0C4CC">{{adress_data.adress}}</p>
        </div>
        <el-form
          ref="form"
          :model="form"
          label-width="70px"
          size="small"
          label-position="left"
          style="padding: 10px;"
        >
          <el-form-item label="用户名">
            <el-input v-model="form.user_name" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.user_password" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="记住登录">
            <el-checkbox v-model="form.login_status" placeholder="请输入密码"></el-checkbox>
          </el-form-item>
          <el-button type="primary" @click="onSubmit" style="width:100%">登录</el-button>
        </el-form>
        <div align="right" style="padding: 10px;">
          <el-button type="text" @click="$router.push('/register')">注册</el-button>
          <el-button type="text" @click="$router.push('/forget')">找回密码</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      background_image: require('@/assets/login_back_image.jpg'), //登录页面组件背景图
      adress_data: {
        //登录头部信息
        title: "登录", //标题
        adress: "欢迎登录unit-ui" //简介
      },
      form: {
        //登录表单信息
        user_name: "unitui", //用户名
        user_password: "123456", //用户密码
        login_status: false //登录状态
      },
      route_data: require('@/assets/json/route.json'), //路由生成数组，并非route数组形式
      menu_data: require('@/assets/json/menu.json') //菜单数组
    };
  },
  methods: {
    onSubmit() {
      //点击登录时触发
      sessionStorage.setItem("route_data", JSON.stringify(this.route_data)); //储存路由数组信息，方便在unitui/option/unitui-init.js文件中进行生成路由信息，防止刷新路由丢失，你也可以在这储存后端返回的数据
      const route_data = JSON.parse(sessionStorage.getItem("route_data")); //获取储存的json数据路由信息，你通过axios获取的数据也和这个相同
      this.init_route(route_data); //执行路由生成方法,传入解析好的路由json数据
    },
    init_route(route_data) {
      //依据后端返回的json数据生成路由
      const init_route_data = []; //定义一个路由数组储存生成的路由信息
      for (let index = 0; index < route_data.length; index++) {
        //循环后端返回的json
        //循环
        if (route_data[index].children != undefined) {
          //有children时生成路由数组方法
          init_route_data[index] = {
            path: route_data[index].path, //路由url
            name: route_data[index].name, //路由名
            component: () => import(`@/${route_data[index].component}`),
            // component: (resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
            meta: {
              //路由一些附加信息
              show_site: route_data[index].meta.show_site, //是否全屏显示
              web_title: route_data[index].meta.web_title //网站标题
            },
            children: [] //嵌套路由
          };
          for (let i = 0; i < route_data[index].children.length; i++) {
            init_route_data[index].children[i] = {
              path: route_data[index].children[i].path, //路由url
              name: route_data[index].children[i].name, //路由名
              component: () => import(`@/${route_data[index].children[i].component}`),
              // component:(resolve) => require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件
              meta: {
                //路由一些附加信息
                show_site: route_data[index].children[i].meta.show_site, //是否全屏显示
                web_title: route_data[index].children[i].meta.web_title //网站标题
              }
            };
          }
        } else {
          //没有children时生成路由数组方法
          init_route_data[index] = {
            path: route_data[index].path, //路由url
            name: route_data[index].name, //路由名
            component: () => import(`@/${route_data[index].component}`),
            // component:(resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
            meta: {
              show_site: route_data[index].meta.show_site, //是否全屏显示
              web_title: route_data[index].meta.web_title //网站标题
            }
          };
          // console.log(index);
        }
      }
      // console.log(init_route_data); //打印生成初始化路由数组
      for (let index = 0; index < route_data.length; index++) {
        //由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加
        this.$router.addRoute(init_route_data[index]); //循环添加数组
      }
      this.init_menu(); //执行菜单生成方法
    },
    init_menu() {
      //生成菜单信息
      sessionStorage.setItem("menu_data", JSON.stringify(this.menu_data)); //储存菜单信息
      this.$message.success("登录成功，即将为您跳转");
      setTimeout(() => {
        this.$router.push("/sub/admin"); //执行路由跳转，默认跳转组件管理
      }, 1500);
    },
  },
  mounted() {
    console.log(this.route_data);
  }
};
</script>
<style scoped>
#login_back {
  width: 100%;
  height: 100vh;
  background-size: cover;
  position: relative;
}
#from_back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 400px;
  height: 350px;
  background: rgba(255, 255, 255, 0);
}
#from {
  width: 100%;
  height: 100%;
  margin-left: 25px;
  background-color: #ffffff;
  padding: 10px;
}
</style>